- web6047 - (2021/09/10(金) 現在、システム調整中のため、一部の表示がおかしいかもしれません)

homepage6047 2020年 3月

プログラミングやRPG(作るほう)が好きな人の日記

 V E C T O R ・ M O R P H I N G 
クリック:アニメする、スライダ:任意位置
この絵を回路図にすれば、2つの回路図の対応関係が示しやすくなります。


このホームページは毎日 夜11時にアクセスできなくなります。

朝6時半に再開されます。(世の中のネット依存対策として)


2020/3/22(日)

RPG の構想と絵の話 -[e]

構想の話

RPG で遊んでいると、敵が出現して戦闘画面になり、戦うことになります。

昔は回復アイテムの数などがポイントで、戦略を練らないと勝てないという、難しくも楽しい戦闘でした。

しかし、最近は、A ボタンを連打していれば勝てる。新しい敵が登場しても、いつものように A ボタンを連打してしまい戦闘終了。

「今、新しい敵がいた気がするけど…、まぁいいか…」

そういう戦闘が最近多い気がして、そんなんでいいのかなと思います。



fig.
▲最近の映画のギリよけシーンみたいに。

構想:

戦闘で呪文を使うには、詠唱しなければならない。

魔法使いが詠唱をしているあいだ、戦士は魔法使いを守らなければならない。

これは敵味方、双方同じで、敵も自分たちの魔法使いが詠唱を完了するために、戦士たちが死守する。

簡単に発動できない代わりに、魔法の力は絶大で、敵の強力な魔法ならば、味方が全員ダメージを受けた上に全員が毒を受けるなどする。



fig.
▲それなら視線は下のほうがいいか。リュックしょってたほうが男は面白いかも。

そして、詠唱を効果的に演出するためには、発光や、もや、天候など、画面エフェクトが充実していると良い。

わざわざ呪文を詠唱することに意味を持たせるためには、どの敵も強敵にする。

基本的には人間は魔物に太刀打ちすることができず、魔法の力を借りなければならない。

戦士は魔法使いを守るために戦い、

魔法使いは戦士に守られ、魔法を発動する。

敵は魔法でなければ倒せない。


 
fig.
▲目は影にしたほうが、安っぽさを回避できる?

世の中に戦士がいっぱいいれば、戦士をいっぱい集めて臨めば勝てるだろうが、あいにく世の中には戦士が少ない。

希少な戦士だけで戦わなければならない。

以上、構想でした。





…以上のような構想を練っても、ゲームソフトに落とし込めないと意味がありません。

シンプルな RPG のなかに いかにその構想を落とし込むかが問題です。

構想を実現するための具体的な仕様:


ただ、プレイヤーは結構単純なシステムを求めていることが多いです。それなのに私を含めた開発者はいつもよくわからないシステムを編み出したがるというのもあるので、構想も本当に必要かどうか考えたほうが良いかもしれません。

▼こういうのも、本当に必要?

続いて、絵の話: 絵描きの経験上の発見を駆使して描いている

fig.
▲背景が暗いのは、仲間が呪文の詠唱をしているから。後ろに見えるマップ画面も一緒に暗くしたほうがいい。

いつも思いますが、キャラクターのイラストを即席でほしくなったら、Excel の図形機能を使って、四角形だけを使って並べると早くできて良いです。

Excel に限らず、図形を配置できて編集する機能があるならどんなソフトウェアでも良いと思います。


私はいつも「四角形を並べるだけだ」なんて簡単そうに言いますが、われながら疑問を感じています。

これまで絵描きを長い間経験してきた中で(趣味でぼちぼちの経験ですが)、いくつかの発見があり、その発見を四角形を並べる作業のなかで、実は使っています。

その発見は絵を描くことで見つけてきたノウハウです。そのため絵が描けない人は絵を描いていないのですから、それらの発見は持ち合わせていないはずです。

もしかしてその発見の有無が絵を描けるかどうかの違いになっていないだろうか…とちょっと最近考えています。

その発見(ノウハウ)を描いている絵に適用することで、絵が魅力的になるんです。

その魅力的な部分を見て、それで「自分も絵を描きたい」ということであれば(たぶんそう)、なおさらその答えは「経験上の発見(ノウハウ)が必要」ということになってしまいます。


今回この記事のために作図した図は、いつものように手抜きですが、その中でそのノウハウを適用しているので6点ほど見ていきたいと思います。



fig.
▲上半身をひねっている表現

使用した発見(ノウハウ)1:

横から見た図だとしても、左肩は前方にせりだし、右肩は後方に引くことで、そういう立体的な表情豊かな姿勢を表現しています。

あるとき ”そういうのが良いんだ” と発見し(ノウハウとして見つけて)、ときどき使っています。

(ガンプラも肩のせり出しは魅力のギミックの1つですね)



fig.
▲風に吹かれている表現

使用した発見(ノウハウ)2:

マントや髪が後方から吹く風で、身体の前方へなびいています。

大変な状況を表現するのに効果的なんです。「風の強い中…」という感じになります。

また、女性の場合はなびく髪で魅力が増すというのもあります。



fig.
▲目を影にしてキャラの主張を下げれば、プレイヤーは感情移入しやすくなる。

使用した発見(ノウハウ)3:

たまたまですが、今回も絵を描いていて発見がありました。

キャラの目はくっきり描くのも良いですが、場合によっては影だけにすると、感情移入が行いやすくなると思いました。感情移入は RPG にとっては大事なことなので、これを読んでいる方はどう思うかわかりませんが、私としては大きな方向転換になるほどの発見です。

「キャラの表情が見えたほうが、伝わるんじゃないの?」

と思われがちですが、その「目に見えるキャラの表情」はプレイヤーの気持ちに連動した表情ではなく、そのゲームの作者が考えたキャラの表情です。表情が見えないほうがプレイヤーは自分の気持ちをキャラに乗せやすくなると思います。この「キャラは自分だ」と思いやすくなると思います。

…絵じゃなくて RPG の開発の発見でしょーが。あれれ



fig.
▲背骨を意識して、パーツの位置にすじを通す。(意味が通るという意味での「すじ」)

使用した発見(ノウハウ)4:

背骨です。

背骨を意識すると、身体と頭の位置関係や、頭を傾ける際にどこを基点にして頭を回転させればいいかが見えてきて、それが説得力のある絵につながります。



fig.
▲何かやろうとしていると思わせるリュックサック。

使用した発見(ノウハウ):5

男の魅力です。

女性なら本体だけで魅力は十分に発揮できます。たとえばボンキュッボンとか美しい髪とか笑顔とか。男はそのまま描いてもあんまり魅力がないです。それは私が男だからかもしれませんが、男が女性ほどに見た目に魅力がないとすれば、男を描く際、どうやって魅力的な絵にすればいいだろう…

…と日ごろから問題意識を持っています。

それで1つの答えが、男の魅力は見た目じゃなくて「どんな行動を取ったか」、「何に取り組んでいるか」、「どんな仕事をしているか」などにあるんじゃないかと、数年前から思うようになったんです。

だから、作業用エプロン着用とか、ヘルメットをかぶっているとか、なんの変哲もない一般兵の姿だとか、そんな姿を描けば良いんじゃないかと思います。

そしてそれだけではなく、目的をもって行動させるのが良いと思うんです。女性だったらきれいに描いてポンっと置けばそれだけでいいんですが、男は動かして魅力を表現するのが良いかなと思います。

それで今回はリュックをしょわせました。なにかやっていそうな人物に見えるでしょ。

…でもマンガ「スラムダンク」の登場人物たちはどれも見た目が魅力的だったから、このノウハウはイマイチかな。私が自分自身がちょっとダメになっちゃってカッコイイ男であることを望まなくなったから、絵のほうでも望まなくなったのかな…。



fig.
▲映画の影響でスケルトンには丸い盾?

使用した発見(ノウハウ):6

最初スケルトンの盾は四角形だったんですが、途中で思い出して円形にしました。

スケルトンには円形の盾がよく似合う。という発見?というか業界に通じている慣習なのかな…。

1963年にイギリスとアメリカで公開された映画「アルゴ探検隊の大冒険」で、特撮で描かれたスケルトンたちが持っていた盾が丸型だったので、初めてスケルトンという怪物を見た人たちは「スケルトンの盾は丸型」と覚えたんでしょうか。それともその映画の製作者が、がいこつの兵士に持たせる盾は丸型が似合うと思ったんでしょうか。

どちらにせよ、スケルトンの盾を丸型にすると、どうも見る人の心に届くところがあるようです。

「がいこつ」に「丸い盾」だと、どこか人を食ったような印象になり、それが良いんだと思います。



…そういうわけで絵描きは「四角形だけ並べれば描けるよ」ではなく、いくつか自分が持っている経験上の発見を駆使しているところがあるわけで、その辺をクリアしないと、絵が描けない人は「魅力のある絵を描く」ことができないのでは…?と考えています。

でも、まずは絵を描くことを楽しめたら良いと思います。そのなかで魅力のノウハウを発見していくんです。

私が今回紹介したように、誰かが言う「こうすると良いよ」という、その人の発見(ノウハウ)に注目するといいかもしれません。



続く記事も絵の話: 簡単に絵を描く?手間をかけて絵を描く?

下の絵も RPG の構想のために作った絵なんですが、弓を引いている女の子の表情が少しリアルです。

”傷ついて、しかめっつらをしている” ところを描こうと思って、何も参考にしないで資料なしのソラで描き始めたところ、まったくうまく描けませんでした。

どうしても、ただ眠そうにしているとか、笑っているように見えるとか、嫌みっぽい顔をしているだけとかになってしまい、「苦しそうな しかめっつら」になりませんでした。

そこで鏡の前で私自身がしかめっつらをしてみたり、スマートホンでその顔を撮影したりしてやっと下の絵(左)のような表情にこぎつけました。(青いのは殴られたときにできるアザです)

絵を描くってやっぱりそういうことなんだ…。この前自分で書いたように、知ってるものは描けるけど、知らないものは描けないんですね。

しかし、髪をどかすと右のようになります。かわいい若い女の子のしかめっつらが良かったんですが、お年寄りみたいですね。

マンガの「ドラゴンボール」とかだと、ダメージを受けた しかめっつら って しょっちゅう描かれていますよね。

それらのマンガのカットをネットで探してマネすれば早くて簡単ですよね。

なんでそれをやらないんでしょうか。ふと やろうとは思ったんですが、私は自分自身に それはNo と言っていました。


似たような話で、最近は3Dの「デジタル・デッサン人形」というものがあり、それを使えば絶妙な角度の人物もプロ並みの描写で自由に描くことができるようです。

そういう手段を使っていることについて正否を問う質問が Yahoo の知恵袋で投稿されていました。

(投稿は ID非公開 になっているので、気にせずリンクすることができます)

絵を描く時に3Dモデルを使ってあたりをとるのはアリですか?

MMD という3Dモデルのソフトでほしいポーズをキャラクターに取らせてそれをそのまま上から なぞることで絵描き(人物の構図)が劇的にうまくなった、でもそれってOKなのかな?という話です。おおむね「OK」という回答が並んでいます。楽しみましょうという意見が多いようでした。私は楽しみましょうと言われてネットでしかめっつらの絵を手に入れて、それでそれらしく描いても喜ぶままに喜べません。人によって精神的に住んでいる場所が異なっていて、違う場所に住んでいる人はその人なりのやり方があるんだと思います。

さらに似たような話で、「カメラ撮影」がありますね。誰でもプロの写真家 顔負けの良い写真が撮れる高機能なデジカメです。高機能でなくてもデジカメというものは撮影してすぐに結果がわかるので、ダメならその場で取り直せば良い写真が撮れます。連射機能を使って、どれにしようかな、みたいなこともできます。これについて写真家の人とかはどう思うでしょうか。テクニックも何もないって思うのではないでしょうか。


便利な方法でも地道な方法でも、どちらにせよ求める結果は同じです。上手な作品を作りたいんです。

思い出すままに書いてしまいますが、前にもおなじような話題を出しました。「Wanderers from Ys」(ゲームソフト)の多重スクロールのパロディを作った際、背景に流れる「雲」を作るのに、ネットの写真ではなく、自分で撮影した写真を使いました。「雲はネットの写真も自分の写真もどちらもほとんど同じ写真だし、描いた完成の雲のイラストもたぶん同じものになると思うけど、どうして自分で撮影することを選んだんでしょう、わからない…」と書いた覚えがあります。

たぶん今回も同じく、今考えてもわからないと思いますが、また考えてみます。

どうしてネットの しかめっつら の絵を手に入れずに、自分の顔を撮影することを選んだのか。


上のリンクのとおり「うしろめたい」気持ちも確かにあります。

難しい問題だなぁ…

でも「自分の力でやりたい」、きっとそこなんだろうなぁ…


それから、必要な表情を自由に描く漫画家の人って偉大だなと思いました。

そう思ったことのほうが一番大事かもしれません。


また NO PC WEEK に入ります。4/5(日)いっぱいまでお休みです。

そんな感じで私のパソコン作業はうまく回らない感じがしています。


(訪問者のどんなニーズと この記事がつながるか)


2020/3/19(木)

UMA & USI

ちょっと調べたんですが、

「UMA」 は、Unidentified Mysterious Animal の略で、「謎の未確認動物」という意味だそうです。普通の英語ではなく和製英語だとか。

ウマと読むなら馬ですが。

そして、

「USI」 は、Unique Student Identifier の略で、「一意の学生識別子」という意味になるそうです。いわゆる学生番号ですね。

ウシと読むなら牛ですが。

だからなんだ、というわけではないんですが。


…実は DRAM の自作の記事で将来、2つの回路図をモーフィングするしくみをホームページ上に作ろうと思っているんです。

つまり、同じ回路図なんですけど、「書き方が違う」回路図が2つあって、その2つの回路図が対応している(同一である)ことを示すために、画像としてのモーフィングをやろうということです。

そのテストプログラムとして馬と牛のベクター画像をモーフィングさせようとして、それで上のような画像を作っているんです。

(「UMA」と「USI」のことばについてはただの冗談です)

ンマー!(馬)

ウッシッシッシ(牛)


(訪問者のどんなニーズと この記事がつながるか)


2020/3/15(日)

最近やっていること

最近は NO PCWEEK の連発で、やる気はあるのにホームページの更新を進められないでいます。

ニュースで「疲労している人や体の弱い人が新型コロナウイルスの影響を受けやすい」と言われていますよね。

(疲労している人、というのは1回くらいしか聞きませんでしたが、まぁ気を付けたほうが良いでしょう)

私はいつも疲労しているし、生まれつき体は強いほうではないので、今、パソコンのやりすぎて疲れてしまうと感染する可能性が高まってしまいちょっとまずいかなぁと思っています。

イラスト -[e]

仕事の休み時間は10分ありますが、その時間に先月紹介した絵の練習をメモ帳を使って行っています。最近は、斜め後ろから見た人の顔(りんかく)を描いています。

ファイナルファンタジー7のクラウドみたいなのは、なんとなくです。むかし私がスクエニに採用してもらいたくて履歴書にバーンと大きくクラウドを描いたことがあって、そのとき覚えてしまいました。

写真の左は一般人がクラウドのコスプレしてるみたいになってしまったので、右にもっとそれっぽく描き直してみました。

アニメキャラ(ゲームキャラ)というのは現実からだいぶ離れた状態で、自然に見えるので不思議ですね。

この練習の絵も自分の顔を後ろから撮影して、写真をもとに線を取り出して模式図を作成し、その模式図をもとにして描いています。


電子回路 -[den]

マイコンはパソコンと違って「デバッグプリント」がなく、プログラムが正しく動いたのかどうか調べるには、即席でやるなら LED の点滅を工夫して意味を持たせてプログラムの結果を判断するという方法があります。

デバッグプリントとは、C 言語や JavaScript などのプログラミングを行う際のデバッグの方法の1つで、プログラムの変数の内容などを画面に表示することでプログラムが正しく動いたかどうかを確認する、というものです。

LED の点滅を使うのは手軽ですが、チカチカという「しるし」だけで判断するのも限界があるので、今回、小型の液晶ディスプレイを導入することにしました。

秋月電子通商 - I2C接続小型キャラクタLCDモジュール 8×2行(税込320円)

この液晶ディスプレイをマイコンで制御するには「I2C」という通信方法を使う ということで、この2日間ぐらい、初めての「I2C」使用に奮闘していました。

最初は「そんなに難しいものではないだろう」と思っていましたが、「I2C」の通信規格を理解することと、それからマイコンに搭載された「I2C」モジュールの仕様、そして「I2C」に対応しているこの液晶ディスプレイの仕様は、どれも説明書などをじっくりと読まないと使いこなせないというものでした。徹夜しちゃったし、オシロスコープで信号の様子を見たりしたしで、もう大変だったよ。

マイコンにしろ、液晶にしろ、使いこなすためには、その説明書(データシート)を全部読むくらいが良いみたいだ……と最近思い始めました。

小さいから簡単そうに見えるんですが、そうではないんですね。

(配線がいっぱいあるのは、別のもっと難しいことをやっている最中だからです。「I2C」に必要な配線は2本だけです)


購入したもの -[shopping]

moraという音楽配信サイトで「コナミ矩形波倶楽部 悪魔城伝説 SOUNDTRACKS (FC版)」の4番目の曲「Beginning (教会、町、墓場ステージ)」という曲を買いました。¥152

結構カッコイイ曲。

「悪魔城ドラキュラ」(MSX2版)は私が小学生の頃に友達とよく遊んだゲームソフトです。

その続編がこの悪魔城伝説…かな?

レンタルしたもの -[eiga]

映画レンタル「ターミネーター:ニュー・フェイト (字幕版)」(Amazon で399円)

Googleプレイ のほうでは字幕に大きな問題があるということで Amazon で観ることにしました。

リンダ・ハミルトン扮するサラ・コナーなんですけど、「お小遣いの計算もできないのよ」と言っていた若いころの初々しさから かけ離れて、皮肉たっぷりの婆さんという感じになってしまい、どこかあまり活躍もなくて形無しなかんじで残念。

また、後半になるほど ”大きなアクションさえすれば良い” という感じがしているのも残念。(M:I の最新作もそんな感じでした)

でも、未来から来た兵士は最初から最後までカッコよかった。

「観終わった後、面白い作品だったら、もう一度見直す」という習慣が私にはありますが、この作品は残念なところが多かったものの、もう一度見直している自分がいました。

全体としては中か、中の上…かな? 作品の全体を時系列で5段階評価をすると、5→3→3→3→3 かな。

最初は圧倒だったなぁ。


(訪問者のどんなニーズと この記事がつながるか)




webappsrcの確認

1. %%com.webapp.src:/webappsrccheck.html%%
と記述した場合

webapps/src/default.cssのスタイル指定が効く
<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数

console.log( "文字列" );

}

function Class1() {

//クラス

console.log( "文字列" );

}

Class1.prototype.method1 = function() {

//メソッド

console.log( "文字列" );

}

</script>

</head>

<body onload="onloadx();" style="">

Hello world!<BR>

</body>

</html>



2. <code>
%%com.webapp.src:/webappsrccheck.html%%
</code>
と記述した場合

このファイルのcodeのスタイル指定が効く
<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数

console.log( "文字列" );

}

function Class1() {

//クラス

console.log( "文字列" );

}

Class1.prototype.method1 = function() {

//メソッド

console.log( "文字列" );

}

</script>

</head>

<body onload="onloadx();" style="">

Hello world!<BR>

</body>

</html>



3.
%%com.webapp.src:/webappsrccheck2.html,/webappsrccheck.html%%
と記述した場合

webapps/src/default.cssのスタイル指定が効く
<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数 コメント変更

console.log( "文字列変更" );

行追加

}

function Class1() {

//クラス コメント変更

console.log( "文字列変更" );

行追加

}

Class1.prototype.method1 = function() {

//メソッド コメント変更

console.log( "文字列変更" );

行追加

}

</script>

</head>

<body onload="onloadx();文字列変更" style="">

Hello world!<BR>

HTML追加

</body>

</html>



4. <code>
%%com.webapp.src:/webappsrccheck2.html,/webappsrccheck.html%%</code>
と記述した場合

このファイルのcodeのスタイル指定が効く
<!DOCTYPE html><!--ESCAPEPROCESS-->

<head>

<script>

function onloadx() {

//一般関数 コメント変更

console.log( "文字列変更" );

行追加

}

function Class1() {

//クラス コメント変更

console.log( "文字列変更" );

行追加

}

Class1.prototype.method1 = function() {

//メソッド コメント変更

console.log( "文字列変更" );

行追加

}

</script>

</head>

<body onload="onloadx();文字列変更" style="">

Hello world!<BR>

HTML追加

</body>

</html>



5. リンクで
src?webappsrccheck.html
と記述した場合

webapps/src/default.cssのスタイル指定が効く
開く

6. リンクで
src?webappsrccheck2.html,webappsrccheck.html
と記述した場合

webapps/src/default.cssのスタイル指定が効く
開く